<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML</title>
  <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
      body{
        background-color: rgb(41, 58, 55);
        font-family: "nb";
      }
      /* 回到顶部 */
      .top1{
        margin-right: 20px;
      }
      .top-logo-zise{
      font-size:30px;
      }
      /* 导航栏 */
      .navbar img{
        width:100px;
        height:100px;
      }
      .navbar{
        background-color: rgb(12, 31, 27);
        height: 100px;
      }
      .navbar li{
        list-style-type: none;
      }
      /* 轮播图 */
      .carousel-1{
        margin-top:100px;;
        width:100%;
        height:600px;
      }
      .carousel-1 img{
        width: 100%;
        height:600px;
      }
      /* 鼠标上移 */
      .navbar a:hover{
        color: forestgreen;
        background-color: rgb(42, 138, 202);
      }.nav a:hover{
        color: forestgreen;
        background-color: rgb(13, 199, 137);
      }

      .collapse a{
        border-radius: 25%;
        border: 1px solid #16333a; 
        width:90x;
        height: 50px;
        background-color: rgb(44, 124, 138);
        text-align: center;
      }
    /* 轮播图小标点 */
     .carousel-indicators li{
      width: 10px;
      height: 10px;
      border-radius: 100%;
  }
  /* 轮播图左右 */
    .carousel-control i{
     font-size:30px;
  }
  /* 字体样式 */
   @font-face{font-family: 'nb';
   src: url("font/douyuFont-2.otf");
}
@font-face{
  font-family: 'nba';
   src: url("font/QingSongShouXieTi1-2.ttf");
}
footer{
  border: rgb(59, 136, 207) solid 2px;
 
}
footer h5{
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
  color: aqua;
  font-family: "nba";
}
    </style>
</head>
<body>
<div class="row">
  <div class="col-9"> 
    <!-- 导航栏 -->
    <div class="fixed-top ">
      <nav class="navbar navbar-expand-md navbar-dark">
        <img src="image/image2/logo.jpg" alt="" class="navbar-brand rounded-circle">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <i class="bi bi-grid-3x3-gap-fill"></i>导航
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar" id="top">
          <ul class="navbar">
            <li class="nav-item">
              <a class="nav-link text-warning" href="index.html" style="line-height:40px;"><i class="bi bi-house-fill"></i>首页</a>
            </li>  
            <li class="nav-item">
              <a class="nav-link text-warning" href="hdl_1.html" style="line-height:40px;">广西梧州</a>
            </li>  
            <li class="nav-item">
              <a class="nav-link text-warning" href="food.html" style="line-height:40px;">广西河池</a>
            </li>  
            <li class="nav-item">
              <a class="nav-link text-warning" href="lsf.html" style="line-height:40px;">广西柳州</a>
            </li>  
            
          </ul>
        </div>  
      </nav>
    </div>
   <!-- 轮播图 -->
    <div id="demo" class="carousel-1 carousel slide carousel-fade" data-ride="carousel" data-interval="2500">
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="image/image2/2.jpg" alt="">
          </div>
          <div class="carousel-item">
           <img src="image/image2/3.jpg" alt="">
          </div>
          <div class="carousel-item">
            <img src="image/image2/4.jpeg" alt="">
          </div>
        </div>
        <div class="carousel-control">
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <i class="bi bi-arrow-left-circle"></i>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <i class="bi bi-arrow-right-circle"></i>
          </a>
        </div>
    </div>
    
      <div class="tab-content">
        <!-- 桂林米粉 -->
        <div class="tab-pane active container " id="home" style="color:white ;">
            <div class="media" style="margin-top: 30px;border: azure  2px;">
              <img src="image/image2/mifen.jpeg" class="ml-0 rounded-circle" style="width: 300px;height: 300px;" >
              <div class="media-body">
                <p style=" line-height: 50px;margin-top: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;桂林米粉驰名中外，在很多大城市都可以看得到桂林米粉的存在，故而桂林米粉成了米粉行业中的品牌，每一个历史悠久的城市，
                  都有几种代表当地饮食文化的大众食品，如北京的挂炉烤鸭、涮羊肉，西安的羊肉泡馍、饺子宴，昆明的过桥米线。
                  在地处西南的旅游名城广西桂林，这种代表性的食品无疑要首推桂林米粉</p>
              </div>
            </div>
            <div class="media" style="border: azure  2px;margin-top: 40px;">
              <div class="media-body" style="text-align: right;">
                <p style=" line-height: 50px;margin-top: 50px;text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;桂林米粉是把大米磨成浆后，通过轧、蒸或其他方式制成的面条状食品。中国食用米粉的地区主要在长江以南。
                  在广西，除了难以大面积栽种水稻的山区外，每一个地方的人都有吃米粉的习惯，且风味不同。南宁市以酸辣味的“老友粉”闻名，宾阳县是酸甜凉爽的“酸粉”，玉林市是“牛巴粉”，桂平市是“猪脚粉”，柳州市是“螺蛳粉”，
                  但广西人普遍认为，“桂林米粉”是最棒的。</p>
              </div>
              <img src="image/image2/mifen1.jpg" class="align-self-center mr-3 rounded-circle" style="width: 300px;height: 300px;">
            </div>
             <div class="media" style="border: azure  2px;margin-top: 40px;">
              <img src="image/image2/mifen2.jpg" class="align-self-start mr-3 rounded-circle" style="width: 300px;height: 300px;margin-top: 20px;">
              <div class="media-body">
                <p style=" line-height: 50px;margin-top: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;桂林米粉发展到现在，他已经成为了一种米粉文化，在这个文化里，有很多种米粉文化品牌，比如尝不忘桂林米粉，红鼻子桂林米粉等等，几乎每一个桂林人都会提醒你，
                  只有用漓江水和“桂林粘米”制成的才有资格称做“桂林米粉”。如果水或米不是上述两样，哪怕稍有不同，桂林人声称，他们一定尝得出来。
                  为什么只有漓江水才能制出桂林米粉特有的爽滑口感，多少年来始终没有一个令人信服的答案，这就使桂林米粉蒙上了一层神秘不可知的色彩，并为喜爱桂林米粉的人津津乐道。。</p>
              </div>
             </div>
        </div>
        <!-- 桂花糕 -->
        <div class="tab-pane container fade" id="menu1" style="color: rgb(173, 201, 19);">
          <div class="media" style="margin-top: 30px; border: azure  2px;margin-top: 40px;">
            <img src="image/image2/gao.jpeg" class="ml-0 rounded-circle" style="width: 300px;height: 300px;">
            <div class="media-body">
              <p style=" line-height: 50px;margin-top: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;桂花糕距今已有300多年的历史，其由来可以追溯到明朝末年，
                相传新都有个叫刘吉祥的小贩，从桂湖池畔桂花飘香的书斋中得到启示，把新鲜桂花收集起来，挤去苦水，用糖浸渍，腌制成蜜桂花，加入蒸熟的米粉打制成糕出售，
                取名桂花糕。糕点一出世便深受顾客的喜爱，一举成名。</p>
            </div>
          </div>
          <div class="media" style="border: azure  2px;margin-top: 40px;">
            <div class="media-body" style="text-align: right;">
              <p style=" line-height: 50px;margin-top: 50px;text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;桂花是桂花糕制作成功的关键因素，桂花喜湿润、温暖的气候，于春季开始萌芽，夏季持续壮大，
                秋季桂花相继绽放，花是黄色的，花蕊是淡淡的黄色，花骨朵很小很小，像一颗小小的星星，且香气浓郁，是采集桂花晒干并制作桂花糕的最佳时期。桂花鲜花可直接制作桂花糕，
                也可加工晒干制成桂花茶，也可当做调味品洒入冰粉中制成桂花冰粉等等，多种做法</p>
            </div>
            <img src="image/image2/gao1.jpg" class="align-self-center mr-3 rounded-circle" style="width: 300px;height: 300px;">
          </div>
           <div class="media" style="border: azure  2px;margin-top: 40px;">
            <img src="image/image2/gao2.jpeg" class="align-self-start mr-3 rounded-circle" style="width: 300px;height: 300px;margin-top: 40px;">
            <div class="media-body">
              <p style=" line-height: 50px;margin-top: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;桂花糕作为制作简单易存储的糕点，无论是作为过年的贡品糕点，还是作为送人的伴手礼，都是一种机智的选择。
                大家也可选择亲自到桂林，一边欣赏这“水作青罗带，山如碧玉簪”的美景，一边品尝软糯爽口、清香宜人的桂花糕，亦是人生一大乐事。</p>
            </div>
           </div>
        </div>
        <!-- 扣肉 -->
        <div class="tab-pane container fade" id="menu2" style="color: rgb(228, 76, 76);">
           <div class="media" style="margin-top: 30px;border: azure  2px;margin-top: 40px;">
            <img src="image/image2/kourou.jpeg" class="ml-0 rounded-circle" style="width: 300px;height: 300px;">
            <div class="media-body">
              <p style=" line-height: 50px;margin-top: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;荔浦扣肉是一道色香味俱全的地方名菜。此菜色泽金黄, 芋片肉片松软爽口, 
                油而不腻，浓香四溢。具有清热祛火、滋润肤色功能。桂林特色名菜，以正宗桂林荔浦芋、带皮五花肉、桂林腐乳为主要材料，烹饪以蒸菜为主，咸甜口味。传统宴席名菜, 
                采用正宗桂林荔浦芋、带皮五花肉、桂林腐乳和各式佐料。将带皮五花肉和切块荔浦芋分过油炸黄, 然后将五花肉块皮朝下, 与芋块相间排放碗中蒸熟, 翻扣入另一盘中即成。</p>
            </div>
          </div>
          <div class="media" style="border: azure  2px;margin-top: 40px;">
            <div class="media-body" style="text-align: right;">
              <p style=" line-height: 50px;margin-top: 50px;text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;芋头又称芋艿，古称蹲鸱，在司马迁的《史记·贷殖列传》中就有“闻汶山之下，沃野，下有蹲鸱”的记载。
                相传荔浦芋从福建引种而来，个大饱满，头尾均匀，品质优良，堪称芋中之王。清代时已成为广西著名的特产。清嘉庆年间，广西桂北厨师取用荔浦芋与猪肉制成了荔浦芋扣肉，成为桂北一带居民婚嫁和节日席上必不可少的特色名菜。</p>
            </div>
            <img src="image/image2/kourou.jpg" class="align-self-center mr-3 rounded-circle" style="width: 300px;height: 300px;">
          </div>
           <div class="media" style="border: azure  2px;margin-top: 40px;">
            <img src="image/image2/kourou1.jpeg" class="align-self-start mr-3 rounded-circle" style="width: 300px;height: 300px;margin-top: 40px;">
            <div class="media-body">
              <p style=" line-height: 50px;margin-top: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;荔浦芋扣肉的制作方法将芋头剥皮，切成六公分长，四点五公分宽，一点二公分厚的长块，用油炸至呈金黄色后捞起；
                将五花猪肉用水煮至筷条能穿过肉皮捞起，用针尖在肉皮上均匀地刺上小孔，涂上酱油、蜂蜜酱和白糖，用油炸至肉皮发泡呈黄色，然后切成块，与桂林豆腐乳、三花酒、五香粉、胡椒、葱汁捞匀。将荔浦芋片和肉拼成排装入肉碗（一块肉夹一块芋头，肉皮朝下），
                放入蒸锅用旺火蒸一小时即可。上席时用圆碟倒翻起，趁热食最佳。荔浦芋扣肉的特点是酥香味美、四季皆宜，男女老幼都喜欢吃。</p>
            </div>
           </div>
          </div>
      </div>
      <footer>
        <h5 style="line-height: 50px;margin-top: 30px;color: rgb(106, 207, 207);">桂林的吃在全国可是有口皆碑的。桂林菜是一个特殊的存在，严格来讲它不属于八大菜系的任何一系，却由于特殊的历史因素，集酸辣的湘菜和清淡的粤菜风味于一体，
          形成适合于中国东西南北中广大地区众口可调的风味。</h5>
          <br>
          <div style="margin-bottom: 40px;"> <a href="https://baike.baidu.com/item/%E6%A1%82%E6%9E%97%E9%A3%8E%E5%91%B3%E5%B0%8F%E5%90%83/15515529" target="_blank">了解更多!</a></div>
        </footer>
  </div>
   <div class="fixed-bottom">
  <a href="#top" class=" top1 go-top float-right">
    <i class="bi bi-arrow-up-circle top-logo-zise"></i>
  </a>
   </div>
  </div>
  <!-- 选项卡 -->
  <div class="offset-9 fixed-top" style="margin-top: 200px;">
      <ul class="nav nav-pills flex-column navbar-expand-md" role="tablist" style="line-height: 80px;">
       <li class="nav-item">
         <a class="nav-link active" data-toggle="tab" href="#home">桂林米粉</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#menu1">桂花糕</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" data-toggle="tab" href="#menu2">荔浦竽扣肉</a>
       </li>
     </ul>
  </div>
</body>
</html>